<template>
    <div class="container-xy">
      <el-row style="padding-bottom:24px;">
        <el-col :span="4">
          <el-input type="text"  v-model="value"></el-input>
        </el-col>
        <el-col :span="4">
          <el-color-picker v-model="color1"></el-color-picker>
        </el-col>
      </el-row>

      <el-button type="primary" @click="handleBarCode()">点击我生成条形码</el-button>
      <el-button type="primary" @click="handleQrCode()">点击我生成二维码</el-button>
      <div class="container-y">
        <img ref="codeBar">
        <div ref="qrCode"></div>
      </div>
    </div>
</template>
<script>
import QRCode from "qrcodejs2";
import JsBarcode from "jsbarcode";
export default {
  data() {
    return {
      color1: '#409EFF',
      value: "",
      qrCode: ""

    };
  },
  methods: {
    handleClick() {},
    //初始化条形码
    handleBarCode(code = "3333") {
      let value = this.value || code;
      let reg = /[\u4E00-\u9FA5]/;
      if(reg.test(value)){
        this.$message.error('不能输入中文！');
        return;
      }
      // 调用 JsBarcode方法生成条形码
      JsBarcode(this.$refs.codeBar, value, {
        text: value,
        format: "CODE128",
        displayValue: true,
        width: 1.2,
        height: 80,
        margin: 5,
        lineColor:this.color1
      });
    },
    /**
     * 初始化二维码
     */
    handleQrCode(code1 = "颜家超") {
      let code = this.value || code1;
      if (this.qrCode) {
        this.qrCode.makeCode(code);
      } else {
        this.qrCode = new QRCode(this.$refs.qrCode, {
          text: code,
          width: 200,
          height: 200,
          colorDark: this.color1, //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
        });
      }
    }
  }
};
</script>
